<template>
	<view class="c-image" :style="'width:'+w+'rpx;height:'+h+'rpx;background:'+bgColor">
		<image v-show="imgShow" :src="src" :mode="mod" :style="'width:'+w+'rpx;height:'+h+'rpx;'" @load="load" @error="err"></image>
		<c-loading class="c-loading" v-if="loadShow" ></c-loading>
		<c-icon v-if="errShow" name="load-err" class="c-load-err" color="#ffffff" ></c-icon>
	</view> 
</template>

<script>
	export default{
		props:{
			src:{
				type:String
			},
			mode:{
				type:String,
				default:"fill" //fill	拉伸图片，使图片填满元素
			},
			width:{
				type:[String,Number],
				default:200
			},
			height:{
				type:[String,Number],
				default:200
			},
			lazyLoad:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				mod:"",
				w:"0",
				h:"0",
				bgColor:"#969799",
				imgShow:true,
				loadShow:false,
				errShow:false
			}
		},
		created() {
			this.init()
		},
		methods:{
			init:function(){
				switch(this.mode){
					case "fill":
						this.mod = "scaleToFill"
					break;
					case "contain":
						this.mod = "aspectFit"
					break;
					case "cover":
						this.mod = "aspectFill"
					break;
					default:
						this.mod = this.mode
					break;
				}
				this.w = this.width;
				this.h = this.height;
				this.imgShow = !this.lazyLoad;
				this.loadShow = this.lazyLoad;
			},
			load:function(e){
				console.log("load",e)
				var that = this;
				setTimeout(function(){
					that.imgShow = true
					that.loadShow = false
					that.bgColor = "transparent"
				},0)
			},
			err:function(e){
				console.log("err",e)
				this.loadShow = false
				this.errShow = true
			}
		}
	}
</script>

<style scoped>
	.c-image{
		position: relative;
	}
	.c-loading{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.c-load-err{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
